<!--  -->
<template>
  <div class="play-detail">
    <nav-bar :style="{background: bgImg}">
      <div slot="left"><icon icon="#icon-fanhui" /></div>
      <div slot="center" style="text-align: left" v-show="isTitle">
        {{ title }}
      </div>
    </nav-bar>
    <b-scroll class="content"
              :probe-type="3"
              @scroll="scrollY">
      <div>
        <div class="bg-img" >
          <img :src="backgroundImgUrl" alt="" />
        </div>
        <song-list  class="song-list" ref="songList" :data="songList"></song-list>
      </div>
    </b-scroll>
  </div>
</template>

<script>
import SongList from "@/components/content/songList/SongList.vue";

import NavBar from "@/components/common/navBar/NavBar.vue";
import BScroll from "@/components/common/scroll/BScroll.vue";
import Icon from "@/components/content/icon/Icon.vue";
import { getPlayList, getSongDetail, setSongList } from "@/network/playList.js";
export default {
  name: "PlayDetail",
  data() {
    return {
      id: 0,
      title: "",
      backgroundImgUrl: "",
      songListId: [],
      songList: [],
      songListTop: 0,
      isTitle: false,
      bgImg: '',
    };
  },
  components: {
    Icon,
    SongList,
    NavBar,
    BScroll,
  },
  created() {
    this.id = this.$route.params.id;
    this.getPlayList(this.id);
  },
  mounted() {
    this.$nextTick(() => {
      this.songListTop = this.$refs.songList.$el.offsetTop
    })
    
  },
  watch: {
    songListId() {
      for (let i of this.songListId) {
        this.getSongDetail(i);
      }
    },
  },
  methods: {
    scrollY(position) {
      if(-position.y > this.songListTop){
        this.isTitle = true
        this.bgImg = 'url('+this.backgroundImgUrl+')'
      }else{
        this.isTitle = false 
        this.bgImg = 'rgba(0,0,0,0)'
      } 
    },

    getPlayList(id) {
      getPlayList(id).then((res) => {
        for (let i of res.playlist.trackIds) {
          this.songListId.push(i.id);
        }
        this.backgroundImgUrl = res.playlist.coverImgUrl;
        this.title = res.playlist.name;
      });
    },
    getSongDetail(id) {
      getSongDetail(id).then((res) => {
        // console.log(res);
        this.songList.push(new setSongList(res.songs[0]));
      });
    },
  },
};
</script>
<style lang='scss' scoped>
.play-detail {
  position: relative;
  .content {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .bg-img {
    position: absolute;
    top: -45px;
    width: 100%;
    height: 250px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .song-list {
    position: relative;
    top: 220px;
    margin: 0 10px;
  }
}
</style>